<template>
    <div class="row-body">
        <div class="top">
            <span>条件筛选说明：同级节点之间为或，子级和父节点为且</span>
            <div>
                <el-button plain icon="el-icon-refresh-right" @click="refreshCon" size="mini">重置</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
            </div>
        </div>
        <div class="condition">
            <nested
                :rootData="rootData"
                @makeNode="makeNode"
                @updateNodeCond="updateNodeCond"
                :filedList="param.arr"
            ></nested>
        </div>
        <Grid
            :rowData="girdData"
            :fieldList="fields"
            :page="page"
            @pageData="pageData"
        ></Grid>
    </div>
</template>

<script>
    import Vue from 'vue'
    import Nested from '@/views/commonView/Nested'
    import tree from '@/views/commonView/tree'
    import Grid from '@/views/commonView/Grid'

    Vue.component('Grid', Grid)
    Vue.component('nested', Nested)
    export default {
        components: {Nested},
        name: 'FilterCond',
        props: ['param'],
        data() {
            return {
                rootData: {
                    id: '1',
                    pid: '0',
                    paramType: '',
                    fldEnname: '',
                    value: '',
                    assist: '',
                    condOper: '',
                    children: []
                },
                dataUnitModify: '/adhoc/dataUnits/dataUnitModify',
                fields: [],
                girdData: [],
                pageSize: 15,
                currentPage: 1,
                countNum: 0,
                page: {}
            }
        },
        methods: {
            makeNode: function (each, type, id, pid) {
                let vm = this
                if (type === 'addNode') {
                    console.log(type)
                    this.$options.methods.addNode(vm, id, pid)
                }
                if (type === 'addChildren') {
                    console.log(type)
                    this.$options.methods.addChildrenNode(vm, id, pid)
                }
                if (type === 'delNode') {
                    console.log(type)
                    this.$options.methods.delNode(vm, id, pid)
                }
            },
            // 添加兄弟节点
            addNode: function (vm, id, pid) {
                let rootNode = vm.rootData
                let node = tree.getNodeById(rootNode, id)

                let newId = tree.UUID(16)
                let newNode = {
                    id: newId,
                    paramType: '',
                    pid: id,
                    fldEnname: '',
                    children: [],
                    value: '',
                    assist: '',
                    condOper: ''
                }
                if (!node.children || !Array.isArray(node.children)) {
                    node.children = []
                }
                node.children.push(newNode)
                vm.rootData = rootNode
            },
            // 重置条件
            refreshCon: function () {
                this.rootData = {
                    id: '1',
                    pid: '0',
                    paramType: '',
                    fldEnname: '',
                    value: '',
                    assist: '',
                    condOper: '',
                    children: []
                }
            },
            // 添加子节点
            addChildrenNode: function (vm, id, pid) {
                let rootNode = vm.rootData
                let node
                // 根节点没有父节点单独处理
                if (id === '1') {
                    node = rootNode
                    pid = '1'
                } else {
                    node = tree.getNodeById(rootNode, pid)
                }
                let index = this.getIndex(node.children, id)
                let newId = tree.UUID(16)

                let newNode = {
                    id: newId,
                    paramType: '',
                    pid: pid,
                    condData: '',
                    fldEnname: '',
                    children: [],
                    value: '',
                    assist: '',
                    condOper: ''
                }
                let newId2 = tree.UUID(16)
                let children = {
                    id: newId2,
                    paramType: '',
                    pid: newId,
                    fldEnname: '',
                    children: [],
                    value: '',
                    assist: '',
                    condOper: ''
                }
                newNode.children.push(children)
                // 对应位置插入一个节点
                node.children.splice(index, 0, newNode)
                vm.rootData = rootNode
            },
            // 删除选中节点
            delNode: function (vm, id, pid) {
                let rootNode = vm.rootData
                let node = tree.getNodeById(rootNode, pid)

                let nodes = node.children
                console.log(tree.getNodeById(rootNode, node.pid))
                // 删除对应id的数据
                let arr = nodes.filter((v) => {
                    if (v.id === id) {
                        return false
                    }
                    return true
                })
                node.children = arr
                vm.rootData = rootNode
            },
            // 更新查询条件
            updateNodeCond(node) {
                let rootNode = this.rootData

                let parentNode = tree.getNodeById(rootNode, node.pid)
                let arr = parentNode.children
                let index = this.getIndex(arr, node.id)
                // 修改index - 1位置的元素，改为node;
                arr.splice(index - 1, 1, node)
                parentNode.children = arr
            },
            // 遍历获取对应数据的index + 1, 数组长度为0时返回0
            getIndex(arr, id) {
                let len = arr.length
                if (len === 0) {
                    return 0
                }
                for (let i = 0; i < len; i++) {
                    if (id === arr[i].id) {
                        return i + 1
                    }
                }
                return len
            },
            initRootData(data) {
                let condition = data.condition
                let rootNode
                if (condition) {
                    rootNode = condition[0]
                }
                if (!rootNode) {
                    rootNode = {
                        id: '1',
                        pid: '0',
                        paramType: '',
                        fldEnname: '',
                        value: '',
                        assist: '',
                        condOper: '',
                        children: []
                    }
                }
                this.rootData = rootNode
                this.fields = data.data.fields
                this.girdData = data.data.data
                this.page = data.data.page
            },
            search() {
                let vm = this
                let param = Object.assign({}, this.param)
                delete param.arr
                let condition = []
                condition.push(this.rootData)
                param.condition = condition
                this.$http.post(this.dataUnitModify, param).then((res) => {
                    let data = res.data.body
                    let d = {}
                    let a = {}
                    a.data = data.data
                    a.fields = data.fields
                    d.data = a
                    d.textFields1 = data.textFields1
                    d.numberFields = data.numberFields
                    d.widgets = data.widgets
                    d.condition = data.condition
                    let arr = res.data.body.fields
                    arr.map((a) => {
                        a.operate = true
                        a.width = 200
                        return a
                    })
                    let arr2 = res.data.body.data
                    let page = {}
                    page.currentPage = res.data.body.page.total.pageNum
                    page.pageSize = res.data.body.page.pageSize
                    page.total = res.data.body.page.total
                    vm.page = page
                    vm.fields = arr
                    vm.girdData = arr2
                    vm.$emit('centerControl', 'FilterCond', d)
                })
            },
            pageData(type, val) {
                if (type === 'SizeChange') {
                    this.pageSize = val
                } else {
                    this.currentPage = val
                }
                this.update(this, this.arr1, this.arr2)
            }
        }
    }
</script>

<style lang="less" scoped>
    .row-body {
        position: relative;
        max-height: 540px;
        overflow: auto;
        width: 100%;
        .top{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            &>div{
                margin-left: 20px;
            }
        }
    }

    .condition {
        width: 100%;
        overflow-y: auto;
        margin-top: 10px;
    }
</style>
